<template>
  <div class="ebook">
    <!-- 点击屏幕中央，呼出上步菜单 -->
    <TitleBar :isTitleAndMenuShow="isTitleAndMenuShow"></TitleBar>
    <!-- 阅读器部分 -->
    <div class="read-wrapper">
      <div id="read"></div>
      <div class="mask">
        <div
          class="left"
          @click="prevPage"
        ></div>
        <div
          class="center"
          @click="toggleTitleAndMenu"
        ></div>
        <div
          class="right"
          @click="nextPage"
        ></div>
      </div>
    </div>
    <!-- 点击屏幕中央，呼出下面菜单 -->
    <MenuBar
      :isTitleAndMenuShow="isTitleAndMenuShow"
      ref="menuBarRef"
      :fontSizeList="fontSizeList"
      :defaultFontSize="defaultFontSize"
      :themesList="themesList"
      :defaultTheme="defaultTheme"
      :bookAvailable="bookAvailable"
      :navigation="navigation"
      @jumpTo="jumpTo"
      @onProgressChange="onProgressChange"
      @setFontSize="setFontSize"
      @setTheme="setTheme"
    ></MenuBar>
  </div>
</template>

<script>
import Epub from 'epubjs'
import MenuBar from '@/components/MenuBar'
import TitleBar from '@/components/TitleBar'
const DOWNLOAD_URL = '/static/epub/别对我说谎：练就一双精确识人眼.epub'
global.ePub = Epub
export default {
  mounted () {
    this.showEpub()
  },
  components: { MenuBar, TitleBar },
  data () {
    return {
      // 菜单显示状态
      isTitleAndMenuShow: false,
      fontSizeList: [
        // 0-6共7个
        { fontSize: 12 },
        { fontSize: 14 },
        { fontSize: 16 },
        { fontSize: 18 },
        { fontSize: 20 },
        { fontSize: 22 },
        { fontSize: 24 }
      ],
      defaultFontSize: 16,
      themesList: [
        {
          name: 'default',
          style: {
            body: {
              'color': '#000', 'background': '#fff'
            }
          }
        },
        {
          name: 'gold',
          style: {
            body: {
              'color': '#000', 'background': '#bdbaae'
            }
          }
        },
        {
          name: 'eye',
          style: {
            body: {
              'color': '#000', 'background': '#a6b9a0'
            }
          }
        },
        {
          name: 'nigth',
          style: {
            body: {
              'color': '#fff', 'background': '#000'
            }
          }
        }
      ],
      defaultTheme: 0,
      // 图书是否全部加载完成
      bookAvailable: false,
      navigation: {}
    }
  },
  methods: {
    // 根据链接跳转到指定位置
    jumpTo (href) {
      this.hideTitleAndMenu()
      this.rendition.display(href)
    },
    // 弹出左侧的目录时，隐藏菜单栏和标题栏
    hideTitleAndMenu () {
      // 隐藏菜单栏和标题栏
      this.isTitleAndMenuShow = false
      this.$refs.menuBarRef.hideSetting()
      this.$refs.menuBarRef.hideContent()
    },
    // progress 进度条的数值(0-100)
    onProgressChange (progress) {
      const percentage = progress / 100
      const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
      this.rendition.display(location)
    },
    // 设置主题
    setTheme (index) {
      this.themes.select(this.themesList[index].name)
      this.defaultTheme = index
    },
    // 修改字体大小
    setFontSize (fontSize) {
      if (this.themes) {
        this.defaultFontSize = fontSize
        this.themes.fontSize(fontSize + 'px')
      }
    },
    // 注册主题
    registerTheme () {
      this.themesList.forEach(theme => {
        this.themes.register(theme.name, theme.style)
      })
    },
    // 电子书的解析和渲染,以及初始化
    showEpub () {
      // 生成Book
      this.book = new Epub(DOWNLOAD_URL)
      // 生成Rendition
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight
      })
      // 通过Rendition.display渲染电子书
      this.rendition.display()
      this.themes = this.rendition.themes
      // 设置默认字号
      this.setFontSize(this.defaultFontSize)
      // 注册主题
      this.registerTheme()
      this.setTheme(this.defaultTheme)
      this.book.ready.then(() => {
        this.navigation = this.book.navigation
        return this.book.locations.generate()
      }).then(result => {
        this.locations = this.book.locations
        this.bookAvailable = true
      })
    },
    // 单击左侧向前翻页
    prevPage () {
      if (this.rendition) {
        this.rendition.prev()
      }
    },
    // 单击右侧有后翻页
    nextPage () {
      if (this.rendition) {
        this.rendition.next()
      }
    },
    // 点击屏幕中央，切换菜单显示隐藏状态
    toggleTitleAndMenu () {
      this.isTitleAndMenuShow = !this.isTitleAndMenuShow
      if (this.isTitleAndMenuShow === false) {
        this.$refs.menuBarRef.hideSetting()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './assets/styles/global.scss';
.ebook {
  position: relative;
  .read-wrapper {
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      width: 100%;
      height: 100%;
      .left {
        flex: 0 0 px2rem(100);
      }
      .center {
        flex: 1;
      }
      .right {
        flex: 0 0 px2rem(100);
      }
    }
  }
}
</style>
